<template>
    <view>
        <!-- pages/list/list.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="false" :isBack="true">
                <view slot="backText" @tap="gotoSign">
                    <image src="/static/images/topbtn.png" mode="widthFix" style="width: 200rpx"></image>
                </view>
                <view slot="content">小剧场</view>
            </cu-custom>
            <!-- <scroll-view scroll-x class="tabbox bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
    <view class="toptab cu-item flex-sub {{index==TabCur?'text-red cur':''}}" wx:for="{{tabList}}"  wx:for-item='item' wx:for-index='index' wx:key="index" bindtap="tabSelect" data-id="{{index}}">
        {{item}}
    </view>
    </scroll-view> -->
        </view>

        <block v-if="TabCur == 0">
            <swiper
                :class="'myswiper screen-swiper ' + (DotStyle ? 'square-dot' : 'round-dot')"
                :indicator-dots="true"
                :circular="true"
                :autoplay="true"
                interval="5000"
                duration="500"
                v-if="swiperList.length > 0"
            >
                <swiper-item @tap="gotoPlay" :data-id="item.video_id" v-for="(item, index) in swiperList" :key="index">
                    <image :src="item.picture" mode="aspectFill"></image>

                    <!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
                </swiper-item>
            </swiper>

            <view class="flex align-center justify-between margin-top">
                <view class="phitem" @tap="gotoPage" data-page="0">
                    <image src="/static/images/icon1.png" mode="widthFix"></image>
                    <text>排行</text>
                </view>
                <view class="phitem" @tap="gotoPage" data-page="1">
                    <image src="/static/images/icon2.png" mode="widthFix"></image>
                    <text>热门</text>
                </view>
                <view class="phitem" @tap="gotoPage" data-page="2">
                    <image src="/static/images/icon3.png" mode="widthFix"></image>
                    <text>最新</text>
                </view>
            </view>
            <view class="cu-bar cztopbox padding-right-sm">
                <view class="action text-black">优选好剧</view>
            </view>
            <view class="flex flex-wrap margin-lr-sm">
                <view class="listitem" @tap="gotoPlay" :data-id="item.id" v-for="(item, index) in list" :key="index">
                    <view class="listimage">
                        <image :src="item.vertical_cover" mode="widthFix"></image>
                    </view>

                    <view class="listbot padding-lr-xs flex align-center">
                        <view v-if="item.tag == '热门'" class="cu-tag radius sm bg-orange">{{ item.tag }}</view>
                        <view v-if="item.tag == '推荐'" class="cu-tag radius sm bg-green">{{ item.tag }}</view>
                        <text class="margin-left-xs text-black">{{ item.title }}</text>
                    </view>
                </view>
            </view>
        </block>
    
      

       <!-- <bar :tabon="2"></bar> -->
    </view>
</template>

<script>
import bar from '../../components/Bar';
// pages/list/list.js
const _api = require('../../utils/api.js');
const apiurl = require('../../utils/apiurl/public.js');
export default {
    components: {
        bar
    },
    data() {
        return {
            loading: false,

            //是否在加载
            isover: false,

            //是否加载完成
            TabCur: 0,

            //当前顶部tab是哪一个
            scrollLeft: 0,

            //左滑的距离
            tabList: ['精选短剧', '短剧资讯', '网友投稿', '精美剧照'],

            swiperList: [],
            list: [],

            //视频列表
            total: 0,

            pageparams: {
                page: 1,
                limit: 20
            },

            pagenum: 0,
            allowplay: false,
            getuser: '',
            DotStyle: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
		// #ifdef MP-WEIXIN
        this.getCode();
		// #endif
        this.getBanner();
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let pagenum = 'pageparams.page';
        this.setData({
            [pagenum]: 1,
            list: []
        });
        this.getList();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.loading) {
            return;
        }
        if (this.isover) {
            return;
        }
        let pagenum = 'pageparams.page';
        let nowpage = this.pageparams.page;
        this.setData({
            [pagenum]: (nowpage += 1)
        });
        this.getList();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getBanner() {
            _api.get(apiurl.banner).then((res) => {
                // console.log(res);
                if (res.data.code == 0) {
                    this.setData({
                        swiperList: res.data.data
                    });
                }
            });
        },

        gotoPage(e) {
            //页面跳转
            let pageindex = e.currentTarget.dataset.page;
            let pagepath;
            if (pageindex == 0) {
                pagepath = '/pages/list/ranking/ranking';
            } else if (pageindex == 1) {
                pagepath = '/pages/list/hot/hot';
            } else if (pageindex == 2) {
                pagepath = '/pages/list/new/new';
            }
            uni.navigateTo({
                url: pagepath
            });
        },

        gotoPlay(e) {
            //跳转到播放页
            let id = e.currentTarget.dataset.id;
            let page = '/pages/play/play?id=' + id;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        },

        getList() {
            this.setData({
                loading: true
            });
          
            _api.get(apiurl.videosearch, {
                ...this.pageparams
            }).then((res) => {
                this.setData({
                    loading: false
                });
                uni.hideLoading({
                    success: (res) => {}
                });
                if (this.pageparams.page == 1) {
                    this.setData({
                        list: res.data.data
                    });
                } else {
                    let newdata = [...this.list, ...res.data.data];
                    this.setData({
                        list: newdata
                    });
                }
                if (res.data.data.length < this.pageparams.limit) {
                    this.setData({
                        isover: true
                    });
                }
            });
        },

        gotoPlay(e) {
            //跳转到播放页
            let id = e.currentTarget.dataset.id;
            let page = '/pages/play/play?id=' + id;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        },

        gotoSign() {
            uni.navigateTo({
                url: '/pages/signin/signin'
            });
        },

        getCode() {
            uni.login({
                success: (res) => {
                    var code = res.code;
                    if (code) {
                        uni.getUserInfo({
                            success: (ures) => {
                                _api.post(apiurl.login, {
                                    js_code: code,
                                    encryptedData: ures.encryptedData,
                                    iv: ures.iv
                                }).then((loginres) => {
                                    console.log(232323);
                                    console.log(loginres.data);
                                    if (loginres.data.code == 0) {
                                        uni.setStorageSync('token', loginres.data.data.token);
                                        this.setData({
                                            allowplay: true
                                        });
                                        this.getUserinfo();
                                    } else {
                                        uni.showToast({
                                            title: '登录失败！',
                                            icon: 'error'
                                        });
                                        setTimeout(() => {
                                            uni.hideToast();
                                        }, 1500);
                                    }
                                });
                            }
                        });
                    }
                }
            });
        },

        getUserinfo() {
            //获取用户信息
            _api.get(apiurl.userinfo).then((res) => {
                if (res.data.code == 0) {
                    this.setData({
                        getuser: res.data.data
                    });
                    uni.setStorageSync('getuser', res.data.data);
                }
                uni.hideLoading();
            });
        },

        tabSelect(e) {
            //顶部tab切换事件
            this.setData({
                TabCur: e.currentTarget.dataset.id,
                scrollLeft: (e.currentTarget.dataset.id - 1) * 60
            });
        }
    }
};
</script>
<style>
/* pages/list/list.wxss */
page {
    background: #ffffff;
    padding-bottom: 100rpx;
    padding-top: 180rpx;
}

.tabbox {
    margin-top: 12rpx;
    margin-left: 12rpx;
    margin-right: 12rpx;
}
.toptab {
    width: 23%;
    text-align: center;
}
.myswiper {
    margin: 8rpx 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
}
.phitem {
    text-align: center;
    flex: 1;
}
.phitem image {
    width: 69rpx;
}
.phitem text {
    display: block;
    font-size: 24rpx;
    margin-top: -6rpx;
}
.listimage image {
    width: 100%;
}
.listimage {
    overflow: hidden;
    height: 300rpx;
    border-radius: 16rpx;
}
.listitem {
    width: 31.8%;
    border-radius: 16rpx;
    margin-left: 10rpx;
}
.listbot {
    margin: 20rpx 0rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zxitempic {
    width: 300rpx;
    flex: 0 0 300rpx;
    height: 150rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.zxitempic image {
    display: block;
    object-fit: cover;
    width: 100%;
}

.tgitempic {
    width: 300rpx;
    flex: 0 0 300rpx;
    height: 150rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.tgitempic image {
    display: block;
    object-fit: cover;
    width: 100%;
}

.tgitemcont {
    height: 150rpx;
}

.wallpaperitem {
    border-radius: 12rpx;
    overflow: hidden;
}
.wallpaperitem image {
    width: 100%;
    display: block;
}

.tip {
    position: fixed;
    bottom: 130rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    z-index: 5500;
}
.tip text {
    display: inline-block;
    font-size: 24rpx;
    background: #ff8d59;
    color: #ffffff;
    padding: 16rpx 50rpx;
    border-radius: 30rpx;
}
.cztopbox {
    background: linear-gradient(to bottom, rgb(0 150 136 / 21%), #ffffff);
    border-top-left-radius: 28rpx;
    border-top-right-radius: 28rpx;
    margin: 20rpx 20rpx 0rpx 20rpx;
}
</style>
